<template>
  <div class="mui-content ">
    <heade background='background' title='优秀科列选评申报填写' v-on:goBack="goBack($event)" color1="color1"></heade>
    <div class="time">
      距离申报结束还有：<span>9天</span>
    </div>
    <form >

      <div class="info" ><div class="infoTitle">活动名称:</div><input type="text" v-model="activeName1"><div class="right"></div></div>
      <div class="info" ><div class="infoTitle">论文标题:</div><input type="text" v-model="activeTitle"><div class="right"></div></div>
      <div class="info" ><div class="infoTitle">填报时间:</div><input type="text" v-model="activeTime"><div class="right"></div></div>
      <div class="info" ><div class="infoTitle">关键字:</div><input type="text" v-model="keyWords"><div class="right"></div></div>
      <div class="info" ><div class="infoTitle ">作者:</div><input type="text" v-model="author"><div class="right"></div></div>

      <div class="ulContent">
        <div class="info infoDown" @click.stop="goOut()">
          <div class="infoTitle infoTitle1" >所属单位:</div>
          <div class="right right1 mui-text-center"  >{{item.texte}}</div>
        </div>
        <div class="info1" v-show="!bottomShow">
          <div class="right right1 mui-text-center" id="rr" >
            <ul id="ul" :style="{display:selec==0?'none': 'block'}" ref="list1">
              省
              <li v-for="(item,index) in selectList1" :key="index"
                  @click.stop="goNone(index)" :class="classe[index]">
                {{item.texte}}
              </li>
            </ul>
            <ul id="ul1" :style="{display:selec==0?'none': 'block'}">
              市
              <li v-for="(item2,index) in arr" :key="index" @click.stop="goNone1(index)" :class="classe1[index]" >{{item2.texte}}
              </li>
            </ul>

            <ul id="ul2" :style="{display:selec==0?'none': 'block'}">
              区
              <li v-for="(item3,index) in arr2" :key="index" @click.stop="goNone2(index)"  >{{item3.texte}}
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="bottomShow" v-show="bottomShow">
        <div class="unit">
          <img src="../../assets/img/zengjia.png" alt=""><div>事件</div>
        </div>
        <div class="info" >
          <div class="infoTitle2">
            <span><input type="checkbox" class="checkbox" v-model="checkbox1"></span><span>第二作者：</span>
          </div>
          <div class="right1">测试</div>
        </div>

        <div class="info" ><div class="infoTitle">资源体系:</div><input type="text"><div class="right"></div></div>
        <div class="info info-last"> <div class="infoTitle1">内容简介:</div>
          <textarea id="textarea"></textarea>
        </div>
        <div class="applyVedio">
          <div class="vedioLeft">视频上传：</div>
          <img src="../../assets/img/shangchuan.png" alt="">
          <input type="file" class="file" v-show="!chooseShow">
        </div>
        <div class="anction">
          <div class="">1、视频只能上传mp4格式</div>
          <div class="">2、视频大小果如超过1GB转换格式1GB以内再上传</div>
          <div><a href=""> 使用格式转换工具</a></div>
        </div>
        <div class="applyVedio" v-show="!alreadyApply">
          <div class="vedioLeft">附件上传： </div>

          <img src="../../assets/img/shangchuan.png" alt="" @click="upLoad">
          <input type="file" class="file" v-show="!chooseShow">
          <!--<div class="file" v-show="chooseShow" @click="choose">点击选择文件</div>-->
        </div>
        <div class="applyVedio1" v-show="alreadyApply">
          <img src="../../assets/img/shangchuan.png" alt="">
          <div class="rightWrapper">
            <div>名称：UI和i</div>
            <div>大小：UI和i</div>
            <div>类型：UI和i</div>
          </div>
        </div>
        <div class="bind mui-text-center" @click="onSubmit">
          提交
        </div>
        <div class="bind mui-text-center bin2" @click="onSubmit2">
          保存
        </div>
      </div>
    </form>
  </div>

</template>
<script>
  import heade from '@components/common/head2.vue'

  export default {
    components:{
      heade,
    },
    data(){
      return{
        activeName:'',
        alreadyApply:false,
        chooseShow:false,
        selectList1:[
          {'id':'0','texte':'四川5444444444444444'},
          {'id':'1','texte':'河北'},
          {'id':'2','texte':'广州'},
        ],
        selectList2:[
          {'id':'0','t1id':'0','texte':'成都'},
          {'id':'1','t1id':'0','texte':'眉山'},
          {'id':'2','t1id':'0','texte':'乐山'},
          {'id':'3','t1id':'1','texte':'保定'},
          {'id':'4','t1id':'1','texte':'北京'},
          {'id':'5','t1id':'1','texte':'廊坊'},
          {'id':'6','t1id':'2','texte':'深圳'},
          {'id':'7','t1id':'2','texte':'广西'},
          {'id':'8','t1id':'3','texte':'单位3-单位0'},
        ],
        selectList3:[
          {'id':'0','t2id':'0','texte':'金牛'},
          {'id':'1','t2id':'0','texte':'午后'},
          {'id':'2','t2id':'0','texte':'靖江'},
          {'id':'3','t2id':'1','texte':'仁寿'},
          {'id':'4','t2id':'1','texte':'钟祥'},
          {'id':'5','t2id':'1','texte':'附加'},
          {'id':'6','t2id':'2','texte':'马鞭'},
          {'id':'7','t2id':'2','texte':'峨边'},
          {'id':'8','t2id':'3','texte':'北京1'},
        ],
        unit:'全部',
        selec:0,
        item:'',
        arr:[],
        arr2:[],
        activeName1:'',
        activeTitle:'',
        activeTime:'',
        keyWords:'',
        author:'',
        classe:[],
        classe1:[],
        bottomShow:true,
        checkbox1:''

      }
    },
    methods:{
      goBack(){
        this.$router.go(-1)
      },
      onSubmit(){
        alert('提交')
      },
      onSubmit2(){
        alert('保存')
      },
      upLoad(){

        let formData = new window.FormData()
        let dd=document.querySelector('input[type=file]').files[0]
        formData.append('userfile', dd)
      },
      choose(){
        this.chooseShow=!this.chooseShow
      },
      goOut(){
        this.item='';
        this.arr=[];
        this.arr2=[];
        this.classe=[];
        this.classe1=[];
        this.selec=!this.selec;
        this.bottomShow=!this.bottomShow
      },
      goNone(index){
        this.classe=[];
        let list1=this.$refs.list1.getElementsByTagName("li")
        for(let key=0;key<list1.length;key++ ){
          if(key===index){
            this.classe.push("active")
          }else{
            this.classe.push(key)
          }
        }
        let arr=[];
        this.arr2=[];
        this.selectList2.forEach((selct2)=>{
          if(selct2.t1id===this.selectList1[index].id){
            arr.push(selct2)
          }
          this.arr=arr;
        });
        return this.classe;
      },
      goNone1(index){
        let arr2=[];
        this.selectList3.forEach((selct3)=>{
          // console.log(this.selectList2[index].id)
          if(selct3.t2id===this.arr[index].id){
            arr2.push(selct3)
          }
          this.arr2=arr2;
        });

        this.classe1=[];
        let list1=this.$refs.list1.getElementsByTagName("li")
        for(let key=0;key<list1.length;key++ ){

          if(key===index){
            this.classe1.push("active")
          }else{
            this.classe1.push(key)
          }
        }
        return this.classe1;
      },
      goNone2(index){
        this.item=this.arr2[index];
        this.selec=!this.selec;
        this.arr=[];
        this.arr2=[];
        this.bottomShow=!this.bottomShow
      },

    }

  }
</script>
<style scoped>
.mui-content .time{
  height: 50px;
  line-height: 50px;
  padding-left: 2%;
}
.mui-content .time span{
  color:rgb(250,170,110) ;
  font-size: 1.1rem;
}
.mui-content form{
  padding-bottom: 10%;
  /*background-color: white;*/
}
  .mui-content .info{
    height: 40px;
    line-height: 40px;
    background-color: white;
    border-bottom: 1px solid gainsboro;
    padding-left: 2%;
    display: flex;
  }
.mui-content .info .infoTitle{
  width: 18%;
  font-size: 14px;
}
.mui-content .info-last{
  border-bottom: none;
  height: 70px;
  background-color: white;

}
.mui-content .info .infoTitle1{
  width: 28%;
  font-size: 14px;
  height: 40px;
  border-bottom: none;
}

.mui-content .info input{
  width: 72%;
  border: none;
  margin-top: 8px;
  height: 25px;
  line-height: 25px;
  font-size: 0.9rem;

}
.mui-content .info .right{
  width: 9%;
}
.mui-content  .unit{
  height: 3.1rem;
  padding: 5%;
}
.mui-content  .unit *{
  float: left;
  display: inline-block;
  padding-right: 8px;
  color:rgba(93, 194, 240, 1);
}
.mui-content  .unit img{
  width: 28px;
  height: 20px;
  background-size: 20px 20px;
}
  #textarea{
    width:100%;
    min-height:70px;
    margin-bottom: 0px;
    padding: 3px;
    border: none;
    outline: 0;
    font-size: 14px;
    line-height: 24px;
  }
.mui-content .applyVedio{
  width: 100%;
  height: 2.5rem;
  font-size: 14px;
  line-height: 40px;
  /*color: #8f8f94;*/
  background-color: white;
  margin-top: 10px;
}
  .mui-content .applyVedio .vedioLeft{
    padding-left: 2%;
    float: left;
  }
.mui-content .file{
  float: right;
  margin-right: 5%;
  width: 50%;
  height: 2.5rem;
  line-height: 3.1rem;
}
.mui-content .applyVedio img{
  margin-right: 5%;
  float: right;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-top: 10px;
}
  .mui-content .anction{

    padding:3% 2% ;
    font-size: 14px;
    color: #8f8f94;
  }
.mui-content .bind{
  width: 88%;
  height: 2.5rem;
  background-color:rgba(93, 194, 240, 1);
  /*border-radius: 40px;*/
  color: white;
  margin:  auto;
  line-height: 2.5rem;
  margin-top: 30px;
  border: none;

}
  .mui-content .bin2{
    border:1px solid rgba(93, 194, 240, 1);
    color: rgba(93, 194, 240, 1);
    background-color:white;
  }
.mui-content .applyVedio1{
  display: flex;
  width: 100%;
  padding: 5%;
  background-color: white;
}
.mui-content .applyVedio1 img{
  width: 3.1rem;
  height: 3.1rem;
}
.mui-content .applyVedio1 .rightWrapper{
  margin-left: 3%;
  font-size: 14px;
}
.file {
  opacity: 0
}
/*复制*/
.mui-content .ulContent{
  position: relative;
}
.mui-content .info1{
  width: 100%;
  z-index: 999;
  position: absolute;
  top:38px;
  padding-bottom:100%;
  /*padding-top: 100%;*/
}
.mui-content .info1 .right1 ul{
  /*margin-top: 38px;*/
  display: inline-block;
  float: left;
  width: 33%;
  overflow: hidden;
  background-color: rgba(93, 194, 240, 1);
  color: white;
  border-right: 1px solid white;

}
.mui-content .info1 .right1 ul li {
  height: 2.4rem;
  line-height: 2.4rem;
  overflow: hidden;
  background-color: white;
  color: grey;
  border-bottom: 1px solid rgba(93, 194, 240, 1);
}
.mui-content .info1 .right1 ul>.active{
  background-color: rgba(93, 194, 240, 1);
  color: white;
}
.mui-content .info .infoTitle2{
  width: 30%;
  font-size: 14px;

}
.mui-content .info .infoTitle2 .checkbox{
  width: 18px;
  height: 15px;
  background-color: #007aff;
}
.mui-content .info .right1{
  display: inline-block;
  width: 50%;
  text-align: center;
}
</style>
